<script setup lang="ts">
import { useEcharts } from "@/hooks/useEchartsDatav";
import { reactive } from "vue";

const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    theme?: string;
    bgColor?: string;
    title?: string;
    subtitle?: string;
    data?: number[]; // 曲线数据
    xAxisData?: string[]; // x轴数据
  }>(),
  {
    width: "100%",
    height: "250px",
    data: () => [],
  }
);

// 柱状图选项
const option = reactive({
  backgroundColor: "transparent",
  title: {
    text: props.title,
    subtext: props.subtitle,
    x: "left",
    textStyle: {
      color: "#fff",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: '10%',
    top: '10%',
    right: '4%',
    bottom: '10%',
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["11-01", "11-02", "11-03", "11-04", "11-05", "11-06"],
    axisLabel: {
      color: "#fff",
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      color: "#fff",
    },
  },
  series: [
    {
      data: [420, 332, 501, 134, 290, 1530, 1420],
      type: "line",
      smooth: true,
      areaStyle: {},
    },
    {
      data: [420, 532, 301, 434, 790, 1430, 1320],
      type: "line",
      smooth: true,
      areaStyle: {},
    },
    {
      data: [120, 1232, 1201, 834, 690, 430, 320],
      type: "line",
      smooth: true,
      areaStyle: {},
    },
  ],
});

const { chartRef } = useEcharts({ props, option });
</script>

<template>
  <div
    ref="chartRef"
    :style="{ width: props.width, height: props.height }"
  ></div>
</template>

<style scoped></style>
